<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text">
    <script>
        //储存setTimeout的变量
        let timeoutid;

        //用户输入时调用的函数
        function namesetTimeout() {
            //如果已经有一个setTimeout在运行，先清除
            if (timeoutid) {
                clearTimeout(timeoutid)
            }

            //设置一个新的setTimeout,300ms后执行验证用户名的函数
            timeoutid = setTimeout(() => {
                console.log('验证用户名...');

                //实际应用中，这里可以是发送请求到服务器验证用户名的代码
            }, 300)
        }

        //绑定输入事件
        document.querySelector('input', namesetTimeout)
    </script>
</body>

</html>